<script setup></script>

<template>
  <!-- Wrapper -->
  <div id="wrapper">
    <!-- contents -->
    <div class="main_content">
      <div class="channal">
        <div class="channal-cover">
          <!-- channal cover -->
          <img
            src="@/assets/images/channnal-cover.jpg"
            alt=""
          />
        </div>

        <div class="main_content_inner">
          <div class="channal-details">
            <div class="left-side">
              <div class="channal-image">
                <a href="#">
                  <img
                    src="@/assets/images/avatars/avatar-1.jpg"
                    alt=""
                  />
                </a>
              </div>
              <div class="channal-details-info">
                <h3>Jesse Showalter</h3>
                <p>12k Subscirptions</p>
              </div>
            </div>
            <div class="right-side">
              <div class="btn-subscribe">
                <a
                  href="#"
                  class="button soft-warning"
                >
                  <i class="icon-feather-plus"></i> subscribe
                </a>
                <span class="subs-amount">120K</span>
              </div>
            </div>
          </div>

          <div
            class="nav-channal"
            k-sticky="offset:61;media : @s"
          >
            <nav class="responsive-tab">
              <ul>
                <li class="uk-active">
                  <a
                    class="active"
                    href="#0"
                    >Home</a
                  >
                </li>
                <li><a href="#0">Videos</a></li>
                <li><a href="#0">Playlist</a></li>
                <li><a href="#0">Channels</a></li>
                <li><a href="#0">About</a></li>
              </ul>
            </nav>
            <form class="nav-channal-saerchbox">
              <i class="uil-search"></i>
              <input
                class="uk-input"
                type="text"
                value="Search Video..."
              />
            </form>
          </div>
        </div>
      </div>

      <div class="main_content_inner">
        <!-- feature video-->
        <div
          class="uk-grid-large"
          uk-grid
        >
          <div class="uk-width-3-4@m">
            <h3>Feature Videos</h3>

            <div
              class="uk-card uk-grid-collapse uk-child-width-1-2@s uk-margin"
              uk-grid
            >
              <div class="uk-card-media-left uk-cover-container">
                <div class="embed-video">
                  <iframe
                    src="https://www.youtube.com/embed/pQN-pnXPaVg"
                    frameborder="0"
                    uk-video="automute: true"
                    allowfullscreen
                    uk-responsive
                  ></iframe>
                </div>

                <!--  Single image
                    <img src="@/assets/images/photo2.jpg" alt="" uk-cover>
                    <canvas width="600" height="350"></canvas> -->
              </div>
              <div>
                <div class="pl-lg-5 mt-sm-3">
                  <h3 class="uk-card-title">Build a Website Tutorial</h3>
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                    do eiusmod tempor incididunt. favorite sketches, behind the
                    scenes clips and web exclusives, featuring all your favorite
                    hosts and cast members. Check out more SNL at
                  </p>

                  <div class="user-details-card py-0">
                    <div class="user-details-card-avatar">
                      <img
                        src="@/assets/images/avatars/avatar-3.jpg"
                        style="width: 40px"
                        alt=""
                      />
                    </div>
                    <div class="user-details-card-name">
                      Stella Johnson
                      <span> Developer <span> 1 year ago </span> </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="uk-width-expand">
            <h5>Stats</h5>
            <ul class="uk-list">
              <li>Joined Jul 2019</li>
              <li>3,741,400,119 views</li>
              <li>25,345,348 subscribers</li>
              <li>729 videos</li>
            </ul>
          </div>
        </div>

        <div class="section-small">
          <h3>Latest Video uplaods</h3>

          <div
            class="video-grid-slider"
            uk-slider="finite: true"
          >
            <ul
              class="uk-slider-items uk-child-width-1-4@m uk-child-width-1-3@s uk-grid"
            >
              <li>
                <a
                  href="single-video.html"
                  class="video-post"
                >
                  <!-- Blog Post Thumbnail -->
                  <div class="video-post-thumbnail">
                    <span class="video-post-count">2.7K</span>
                    <span class="video-post-time">23:00</span>
                    <span class="play-btn-trigger"></span>
                    <!-- option menu -->
                    <span class="btn-option">
                      <i class="icon-feather-more-vertical"></i>
                    </span>
                    <div
                      class="dropdown-option-nav"
                      uk-dropdown="pos: bottom-right ;mode : hover ;animation: uk-animation-slide-bottom-small"
                    >
                      <ul>
                        <li>
                          <span> <i class="uil-history"></i> Watch Later</span>
                        </li>
                        <li>
                          <span>
                            <i class="uil-bookmark"></i> Add Bookmark</span
                          >
                        </li>
                        <li>
                          <span>
                            <i class="uil-share-alt"></i> Share Your
                            Friends</span
                          >
                        </li>
                      </ul>
                    </div>
                    <img
                      src="@/assets/images/video-thumbal/img-5.png"
                      alt=""
                    />
                  </div>
                  <!-- Blog Post Content -->
                  <div class="video-post-content">
                    <h3>Learn UI/UX Designing Latest Website In Adobe XD</h3>
                    <img
                      src="@/assets/images/avatars/avatar-4.jpg"
                      alt=""
                    />
                    <span class="video-post-user">Adrian Mohani</span>
                    <span class="video-post-views">531k views</span>
                    <span class="video-post-date"> 2 weeks ago </span>
                  </div>
                </a>
              </li>

              <li>
                <a
                  href="single-video.html"
                  class="video-post"
                >
                  <!-- Blog Post Thumbnail -->
                  <div class="video-post-thumbnail">
                    <span class="video-post-count">1.4M</span>
                    <span class="video-post-time">23:00</span>
                    <span class="play-btn-trigger"></span>
                    <!-- option menu -->
                    <span class="btn-option">
                      <i class="icon-feather-more-vertical"></i>
                    </span>
                    <div
                      class="dropdown-option-nav"
                      uk-dropdown="pos: bottom-right ;mode : hover ;animation: uk-animation-slide-bottom-small"
                    >
                      <ul>
                        <li>
                          <span> <i class="uil-history"></i> Watch Later</span>
                        </li>
                        <li>
                          <span>
                            <i class="uil-bookmark"></i> Add Bookmark</span
                          >
                        </li>
                        <li>
                          <span>
                            <i class="uil-share-alt"></i> Share Your
                            Friends</span
                          >
                        </li>
                      </ul>
                    </div>

                    <img
                      src="@/assets/images/video-thumbal/img-1.png"
                      alt=""
                    />
                  </div>

                  <!-- Blog Post Content -->
                  <div class="video-post-content">
                    <h3>
                      Learn How-To Design & Prototype in Adobe XD Tutorial
                    </h3>
                    <img
                      src="@/assets/images/avatars/avatar-3.jpg"
                      alt=""
                    />
                    <span class="video-post-user">Jonathan Madano</span>
                    <span class="video-post-views">531k views</span>
                    <span class="video-post-date"> 2 weeks ago </span>
                  </div>
                </a>
              </li>

              <li>
                <a
                  href="single-video.html"
                  class="video-post"
                >
                  <!-- Blog Post Thumbnail -->
                  <div class="video-post-thumbnail">
                    <span class="video-post-count">1.4M</span>
                    <span class="video-post-time">23:00</span>
                    <span class="play-btn-trigger"></span>
                    <!-- option menu -->
                    <span class="btn-option">
                      <i class="icon-feather-more-vertical"></i>
                    </span>
                    <div
                      class="dropdown-option-nav"
                      uk-dropdown="pos: bottom-right ;mode : hover ;animation: uk-animation-slide-bottom-small"
                    >
                      <ul>
                        <li>
                          <span> <i class="uil-history"></i> Watch Later</span>
                        </li>
                        <li>
                          <span>
                            <i class="uil-bookmark"></i> Add Bookmark</span
                          >
                        </li>
                        <li>
                          <span>
                            <i class="uil-share-alt"></i> Share Your
                            Friends</span
                          >
                        </li>
                      </ul>
                    </div>
                    <img
                      src="@/assets/images/video-thumbal/4.png"
                      alt=""
                    />
                  </div>
                  <!-- Blog Post Content -->
                  <div class="video-post-content">
                    <h3>
                      Learn how to upload files using Laravel and Filepond
                    </h3>
                    <img
                      src="@/assets/images/avatars/avatar-4.jpg"
                      alt=""
                    />
                    <span class="video-post-user">Adrian Mohani</span>
                    <span class="video-post-views">531k views</span>
                    <span class="video-post-date"> 2 weeks ago </span>
                  </div>
                </a>
              </li>

              <li>
                <a
                  href="single-video.html"
                  class="video-post"
                >
                  <!-- Blog Post Thumbnail -->
                  <div class="video-post-thumbnail">
                    <span class="video-post-count">1.4M</span>
                    <span class="video-post-time">23:00</span>
                    <span class="play-btn-trigger"></span>
                    <!-- option menu -->
                    <span class="btn-option">
                      <i class="icon-feather-more-vertical"></i>
                    </span>
                    <div
                      class="dropdown-option-nav"
                      uk-dropdown="pos: bottom-right ;mode : hover ;animation: uk-animation-slide-bottom-small"
                    >
                      <ul>
                        <li>
                          <span> <i class="uil-history"></i> Watch Later</span>
                        </li>
                        <li>
                          <span>
                            <i class="uil-bookmark"></i> Add Bookmark</span
                          >
                        </li>
                        <li>
                          <span>
                            <i class="uil-share-alt"></i> Share Your
                            Friends</span
                          >
                        </li>
                      </ul>
                    </div>

                    <img
                      src="@/assets/images/video-thumbal/2.png"
                      alt=""
                    />
                  </div>

                  <!-- Blog Post Content -->
                  <div class="video-post-content">
                    <h3>How to create a basic Sticky HTML element using CSS</h3>
                    <img
                      src="@/assets/images/avatars/avatar-3.jpg"
                      alt=""
                    />
                    <span class="video-post-user">Jonathan Madano</span>
                    <span class="video-post-views">531k views</span>
                    <span class="video-post-date"> 2 weeks ago </span>
                  </div>
                </a>
              </li>

              <li>
                <a
                  href="single-video.html"
                  class="video-post"
                >
                  <!-- Blog Post Thumbnail -->
                  <div class="video-post-thumbnail">
                    <span class="video-post-count">2.7k</span>
                    <span class="video-post-time">40:00</span>
                    <span class="play-btn-trigger"></span>
                    <!-- option menu -->
                    <span class="btn-option">
                      <i class="icon-feather-more-vertical"></i>
                    </span>
                    <div
                      class="dropdown-option-nav"
                      uk-dropdown="pos: bottom-right ;mode : hover;animation: uk-animation-slide-bottom-small"
                    >
                      <ul>
                        <li>
                          <span> <i class="uil-history"></i> Watch Later</span>
                        </li>
                        <li>
                          <span>
                            <i class="uil-bookmark"></i> Add Bookmark</span
                          >
                        </li>
                        <li>
                          <span>
                            <i class="uil-share-alt"></i> Share Your
                            Friends</span
                          >
                        </li>
                      </ul>
                    </div>
                    <img
                      src="@/assets/images/video-thumbal/img-2.png"
                      alt=""
                    />
                  </div>
                  <!-- Blog Post Content -->
                  <div class="video-post-content">
                    <h3>
                      Adobe XD Basics Top 30 Tips to know when getting started
                    </h3>
                    <img
                      src="@/assets/images/avatars/avatar-2.jpg"
                      alt=""
                    />
                    <span class="video-post-user">Stella Johnson</span>
                    <span class="video-post-views">938k views</span>
                    <span class="video-post-date"> 3 weeks ago </span>
                  </div>
                </a>
              </li>

              <li>
                <a
                  href="single-video.html"
                  class="video-post"
                >
                  <!-- Blog Post Thumbnail -->
                  <div class="video-post-thumbnail">
                    <span class="video-post-count">2.7k</span>
                    <span class="video-post-time">40:00</span>
                    <span class="play-btn-trigger"></span>
                    <!-- option menu -->
                    <span class="btn-option">
                      <i class="icon-feather-more-vertical"></i>
                    </span>
                    <div
                      class="dropdown-option-nav"
                      uk-dropdown="pos: bottom-right ;mode : hover;animation: uk-animation-slide-bottom-small"
                    >
                      <ul>
                        <li>
                          <span> <i class="uil-history"></i> Watch Later</span>
                        </li>
                        <li>
                          <span>
                            <i class="uil-bookmark"></i> Add Bookmark</span
                          >
                        </li>
                        <li>
                          <span>
                            <i class="uil-share-alt"></i> Share Your
                            Friends</span
                          >
                        </li>
                      </ul>
                    </div>
                    <img
                      src="@/assets/images/video-thumbal/1.png"
                      alt=""
                    />
                  </div>
                  <!-- Blog Post Content -->
                  <div class="video-post-content">
                    <h3>Learn how to create a PHP singleton class</h3>
                    <img
                      src="@/assets/images/avatars/avatar-2.jpg"
                      alt=""
                    />
                    <span class="video-post-user">Stella Johnson</span>
                    <span class="video-post-views">938k views</span>
                    <span class="video-post-date"> 3 weeks ago </span>
                  </div>
                </a>
              </li>
            </ul>

            <a
              class="uk-position-center-left uk-position-small uk-hidden-hover slidenav-prev"
              href="#"
              uk-slider-item="previous"
            ></a>
            <a
              class="uk-position-center-right uk-position-small uk-hidden-hover slidenav-next"
              href="#"
              uk-slider-item="next"
            ></a>
          </div>
        </div>

        <div class="section-small">
          <h3>All Videos</h3>

          <div
            class="uk-child-width-1-4@m mb-11"
            uk-grid
            uk-scrollspy="target: > div; cls: uk-animation-slide-bottom-small; delay: 100"
          >
            <div>
              <a
                href="single-video.html"
                class="video-post"
              >
                <!-- Blog Post Thumbnail -->
                <div class="video-post-thumbnail">
                  <span class="video-post-count">1.4M</span>
                  <span class="video-post-time">23:00</span>
                  <span class="play-btn-trigger"></span>
                  <!-- option menu -->
                  <span class="btn-option">
                    <i class="icon-feather-more-vertical"></i>
                  </span>
                  <div
                    class="dropdown-option-nav"
                    uk-dropdown="pos: bottom-right ;mode : hover ;animation: uk-animation-slide-bottom-small"
                  >
                    <ul>
                      <li>
                        <span> <i class="uil-history"></i> Watch Later</span>
                      </li>
                      <li>
                        <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                      </li>
                      <li>
                        <span>
                          <i class="uil-share-alt"></i> Share Your Friends</span
                        >
                      </li>
                    </ul>
                  </div>

                  <img
                    src="@/assets/images/video-thumbal/2.png"
                    alt=""
                  />
                </div>

                <!-- Blog Post Content -->
                <div class="video-post-content">
                  <h3>How to create a basic Sticky HTML element using CSS</h3>
                  <img
                    src="@/assets/images/avatars/avatar-3.jpg"
                    alt=""
                  />
                  <span class="video-post-user">Jonathan Madano</span>
                  <span class="video-post-views">531k views</span>
                  <span class="video-post-date"> 2 weeks ago </span>
                </div>
              </a>
            </div>

            <div>
              <a
                href="single-video.html"
                class="video-post"
              >
                <!-- Blog Post Thumbnail -->
                <div class="video-post-thumbnail">
                  <span class="video-post-count">2.7k</span>
                  <span class="video-post-time">40:00</span>
                  <span class="play-btn-trigger"></span>
                  <!-- option menu -->
                  <span class="btn-option">
                    <i class="icon-feather-more-vertical"></i>
                  </span>
                  <div
                    class="dropdown-option-nav"
                    uk-dropdown="pos: bottom-right ;mode : hover;animation: uk-animation-slide-bottom-small"
                  >
                    <ul>
                      <li>
                        <span> <i class="uil-history"></i> Watch Later</span>
                      </li>
                      <li>
                        <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                      </li>
                      <li>
                        <span>
                          <i class="uil-share-alt"></i> Share Your Friends</span
                        >
                      </li>
                    </ul>
                  </div>
                  <img
                    src="@/assets/images/video-thumbal/1.png"
                    alt=""
                  />
                </div>
                <!-- Blog Post Content -->
                <div class="video-post-content">
                  <h3>Learn how to create a PHP singleton class</h3>
                  <img
                    src="@/assets/images/avatars/avatar-2.jpg"
                    alt=""
                  />
                  <span class="video-post-user">Stella Johnson</span>
                  <span class="video-post-views">938k views</span>
                  <span class="video-post-date"> 3 weeks ago </span>
                </div>
              </a>
            </div>

            <div>
              <a
                href="single-video.html"
                class="video-post"
              >
                <!-- Blog Post Thumbnail -->
                <div class="video-post-thumbnail">
                  <span class="video-post-count">2.3M</span>
                  <span class="video-post-time">14:00</span>
                  <span class="play-btn-trigger"></span>
                  <!-- option menu -->
                  <span class="btn-option">
                    <i class="icon-feather-more-vertical"></i>
                  </span>
                  <div
                    class="dropdown-option-nav"
                    uk-dropdown="pos: bottom-right ;mode : hover;animation: uk-animation-slide-bottom-small"
                  >
                    <ul>
                      <li>
                        <span> <i class="uil-history"></i> Watch Later</span>
                      </li>
                      <li>
                        <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                      </li>
                      <li>
                        <span>
                          <i class="uil-share-alt"></i> Share Your Friends</span
                        >
                      </li>
                    </ul>
                  </div>
                  <img
                    src="@/assets/images/video-thumbal/3.png"
                    alt=""
                  />
                </div>
                <!-- Blog Post Content -->
                <div class="video-post-content">
                  <h3>
                    Creating a Laravel Package - and Initializing Package
                    Folders
                  </h3>
                  <img
                    src="@/assets/images/avatars/avatar-5.jpg"
                    alt=""
                  />
                  <span class="video-post-user">Alex Dolgove</span>
                  <span class="video-post-views">531k views</span>
                  <span class="video-post-date"> 2 weeks ago </span>
                </div>
              </a>
            </div>

            <div>
              <a
                href="single-video.html"
                class="video-post"
              >
                <!-- Blog Post Thumbnail -->
                <div class="video-post-thumbnail">
                  <span class="video-post-count">1.4M</span>
                  <span class="video-post-time">23:00</span>
                  <span class="play-btn-trigger"></span>
                  <!-- option menu -->
                  <span class="btn-option">
                    <i class="icon-feather-more-vertical"></i>
                  </span>
                  <div
                    class="dropdown-option-nav"
                    uk-dropdown="pos: bottom-right ;mode : hover ;animation: uk-animation-slide-bottom-small"
                  >
                    <ul>
                      <li>
                        <span> <i class="uil-history"></i> Watch Later</span>
                      </li>
                      <li>
                        <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                      </li>
                      <li>
                        <span>
                          <i class="uil-share-alt"></i> Share Your Friends</span
                        >
                      </li>
                    </ul>
                  </div>
                  <img
                    src="@/assets/images/video-thumbal/4.png"
                    alt=""
                  />
                </div>
                <!-- Blog Post Content -->
                <div class="video-post-content">
                  <h3>Learn how to upload files using Laravel and Filepond</h3>
                  <img
                    src="@/assets/images/avatars/avatar-4.jpg"
                    alt=""
                  />
                  <span class="video-post-user">Adrian Mohani</span>
                  <span class="video-post-views">531k views</span>
                  <span class="video-post-date"> 2 weeks ago </span>
                </div>
              </a>
            </div>

            <div>
              <a
                href="single-video.html"
                class="video-post"
              >
                <!-- Blog Post Thumbnail -->
                <div class="video-post-thumbnail">
                  <span class="video-post-count">1.4M</span>
                  <span class="video-post-time">23:00</span>
                  <span class="play-btn-trigger"></span>
                  <!-- option menu -->
                  <span class="btn-option">
                    <i class="icon-feather-more-vertical"></i>
                  </span>
                  <div
                    class="dropdown-option-nav"
                    uk-dropdown="pos: bottom-right ;mode : hover ;animation: uk-animation-slide-bottom-small"
                  >
                    <ul>
                      <li>
                        <span> <i class="uil-history"></i> Watch Later</span>
                      </li>
                      <li>
                        <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                      </li>
                      <li>
                        <span>
                          <i class="uil-share-alt"></i> Share Your Friends</span
                        >
                      </li>
                    </ul>
                  </div>

                  <img
                    src="@/assets/images/video-thumbal/img-1.png"
                    alt=""
                  />
                </div>

                <!-- Blog Post Content -->
                <div class="video-post-content">
                  <h3>Learn How-To Design & Prototype in Adobe XD Tutorial</h3>
                  <img
                    src="@/assets/images/avatars/avatar-3.jpg"
                    alt=""
                  />
                  <span class="video-post-user">Jonathan Madano</span>
                  <span class="video-post-views">531k views</span>
                  <span class="video-post-date"> 2 weeks ago </span>
                </div>
              </a>
            </div>

            <div>
              <a
                href="single-video.html"
                class="video-post"
              >
                <!-- Blog Post Thumbnail -->
                <div class="video-post-thumbnail">
                  <span class="video-post-count">2.7k</span>
                  <span class="video-post-time">40:00</span>
                  <span class="play-btn-trigger"></span>
                  <!-- option menu -->
                  <span class="btn-option">
                    <i class="icon-feather-more-vertical"></i>
                  </span>
                  <div
                    class="dropdown-option-nav"
                    uk-dropdown="pos: bottom-right ;mode : hover;animation: uk-animation-slide-bottom-small"
                  >
                    <ul>
                      <li>
                        <span> <i class="uil-history"></i> Watch Later</span>
                      </li>
                      <li>
                        <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                      </li>
                      <li>
                        <span>
                          <i class="uil-share-alt"></i> Share Your Friends</span
                        >
                      </li>
                    </ul>
                  </div>
                  <img
                    src="@/assets/images/video-thumbal/img-3.png"
                    alt=""
                  />
                </div>
                <!-- Blog Post Content -->
                <div class="video-post-content">
                  <h3>Learn How to Prototype Faster with Mockplus! in 2020</h3>
                  <img
                    src="@/assets/images/avatars/avatar-2.jpg"
                    alt=""
                  />
                  <span class="video-post-user">Stella Johnson</span>
                  <span class="video-post-views">938k views</span>
                  <span class="video-post-date"> 3 weeks ago </span>
                </div>
              </a>
            </div>

            <div>
              <a
                href="single-video.html"
                class="video-post"
              >
                <!-- Blog Post Thumbnail -->
                <div class="video-post-thumbnail">
                  <span class="video-post-count">2.3M</span>
                  <span class="video-post-time">14:00</span>
                  <span class="play-btn-trigger"></span>
                  <!-- option menu -->
                  <span class="btn-option">
                    <i class="icon-feather-more-vertical"></i>
                  </span>
                  <div
                    class="dropdown-option-nav"
                    uk-dropdown="pos: bottom-right ;mode : hover;animation: uk-animation-slide-bottom-small"
                  >
                    <ul>
                      <li>
                        <span> <i class="uil-history"></i> Watch Later</span>
                      </li>
                      <li>
                        <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                      </li>
                      <li>
                        <span>
                          <i class="uil-share-alt"></i> Share Your Friends</span
                        >
                      </li>
                    </ul>
                  </div>
                  <img
                    src="@/assets/images/video-thumbal/img-4.png"
                    alt=""
                  />
                </div>
                <!-- Blog Post Content -->
                <div class="video-post-content">
                  <h3>Adobe XD Design Tutorial Website Landing Page</h3>
                  <img
                    src="@/assets/images/avatars/avatar-5.jpg"
                    alt=""
                  />
                  <span class="video-post-user">Alex Dolgove</span>
                  <span class="video-post-views">531k views</span>
                  <span class="video-post-date"> 2 weeks ago </span>
                </div>
              </a>
            </div>

            <div>
              <a
                href="single-video.html"
                class="video-post"
              >
                <!-- Blog Post Thumbnail -->
                <div class="video-post-thumbnail">
                  <span class="video-post-count">1.4M</span>
                  <span class="video-post-time">23:00</span>
                  <span class="play-btn-trigger"></span>
                  <!-- option menu -->
                  <span class="btn-option">
                    <i class="icon-feather-more-vertical"></i>
                  </span>
                  <div
                    class="dropdown-option-nav"
                    uk-dropdown="pos: bottom-right ;mode : hover ;animation: uk-animation-slide-bottom-small"
                  >
                    <ul>
                      <li>
                        <span> <i class="uil-history"></i> Watch Later</span>
                      </li>
                      <li>
                        <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                      </li>
                      <li>
                        <span>
                          <i class="uil-share-alt"></i> Share Your Friends</span
                        >
                      </li>
                    </ul>
                  </div>
                  <img
                    src="@/assets/images/video-thumbal/img-5.png"
                    alt=""
                  />
                </div>
                <!-- Blog Post Content -->
                <div class="video-post-content">
                  <h3>Learn UI/UX Designing Latest Website In Adobe XD</h3>
                  <img
                    src="@/assets/images/avatars/avatar-4.jpg"
                    alt=""
                  />
                  <span class="video-post-user">Adrian Mohani</span>
                  <span class="video-post-views">531k views</span>
                  <span class="video-post-date"> 2 weeks ago </span>
                </div>
              </a>
            </div>
          </div>
          <!-- <BxjPage /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<style></style>
